<template>
  <div>
    <div
      class="left"
      :class="{ 'left-hide': leftHide }"
      ref="leftRef"
    >
      <div class="left-content">
        <div class="left-content-tag-t" />
        <div class="left-content-tag-b" />
        <div class="left-content-title">项目建设</div>
        <div class="left-content-search">
          <el-checkbox
            v-model="checkboxState"
            size="mini"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          />
          <Search v-model="keyword" />
          <!--          <More v-model="showMore" />-->
        </div>
        <el-scrollbar class="left-content-tree">
          <div v-show="showMore" class="left-content-query">
            <div class="left-content-query-item">
              <!--              <span>项目周期</span>-->
              <el-select
                :popper-append-to-body="false"
                class="time"
                v-model="projectCycle"
                placeholder="项目周期"
                clearable
              >
                <el-option
                  v-for="item in projectCycleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="left-content-query-item">
              <!--              <span>所在区域</span>-->
              <el-select
                :popper-append-to-body="false"
                class="time"
                v-model="projectArea"
                placeholder="所在区域"
                clearable
              >
                <el-option
                  v-for="item in projectAreaOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="left-content-query-item">
              <!--              <span>项目状态</span>-->
              <el-select
                :popper-append-to-body="false"
                class="time"
                v-model="projectStatus"
                placeholder="项目状态"
                clearable
              >
                <el-option
                  v-for="item in projectStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="left-content-query-item">
              <!--              <span>项目类型</span>-->
              <el-select
                :popper-append-to-body="false"
                class="time"
                v-model="projectType"
                placeholder="项目类型"
                clearable
              >
                <el-option
                  v-for="item in projectTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <!--            <div class="left-content-query-btn">-->
            <!--              <div class="submit" @click="confirmFilter">-->
            <!--                确定-->
            <!--              </div>-->
            <!--              <div class="cancel" @click="showMore = false">-->
            <!--                取消-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
          <div class="project-list">
            <div
              class="project-list-item"
              v-for="data in shownProjectListData"
              :key="data.pkid"
              @click="handleProjectItemClick(data)"
            >
              <div class="project-list-item-top">
                <el-checkbox
                  v-model="data.checked"
                  @click.native="(e) => e.stopPropagation()"
                  @change="
                    (checked) => handleChange(checked, data)
                  "
                />
                <div class="project-list-item-top__title">
                  <!--                  <el-tooltip-->
                  <!--                    effect="dark"-->
                  <!--                    :content="data.name"-->
                  <!--                    placement="top"-->
                  <!--                  >-->
                  <span class="name">{{ data.name }}</span>
                  <!--                  </el-tooltip>-->
                  <span
                    class="status"
                    :class="{
                      zj: data.status === '在建',
                      jc: data.status === '建成',
                      dj: data.status === '待建'
                    }"
                    >{{ data.status }}</span
                  >
                </div>
              </div>
              <div class="project-list-item-bottom">
                <span>{{ data.type }}</span>
                <span>{{ data.cycle }}</span>
                <span>{{ data.amount || '--' }}万元</span>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div
        class="left-close"
        @click="leftHide = !leftHide"
      ></div>
      <div
        class="bar"
        @mousedown.prevent="handleLeftMouseDown"
      ></div>
    </div>
    <div
      class="right"
      :class="{ 'right-hide': rightHide }"
      ref="rightRef"
    >
      <el-tabs
        v-model="rightTabActiveName"
        @tab-click="handleRightTabClick"
      >
        <el-tab-pane label="项目统计" name="statistics">
          <el-scrollbar class="right-content">
            <div class="right-content-title">
              <div class="right-content-title-l"></div>
              <p class="right-content-title-r">项目统计</p>
              <Icon
                title="筛选"
                :name="
                  rightFilterPanelVisible
                    ? 'shaixuanshouqi'
                    : 'shaixuan'
                "
                font-size="20"
                :color="
                  rightFilterPanelVisible
                    ? 'rgba(0, 210, 255, 1)'
                    : '#D2E6F0'
                "
                @click.native="
                  rightFilterPanelVisible =
                    !rightFilterPanelVisible
                "
              />
            </div>
            <el-form
              v-show="rightFilterPanelVisible"
              label-position="top"
            >
              <el-form-item label="项目周期：" prop="cycle">
                <el-select
                  :popper-append-to-body="false"
                  v-model="form.cycle"
                >
                  <el-option
                    v-for="item in optionAll.cycleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目区域：" prop="area">
                <el-select
                  :popper-append-to-body="false"
                  v-model="form.area"
                >
                  <el-option
                    v-for="item in optionAll.areaOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="项目状态："
                prop="status"
              >
                <el-select
                  :popper-append-to-body="false"
                  v-model="form.status"
                >
                  <el-option
                    v-for="item in optionAll.statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目类型：" prop="type">
                <el-select
                  :popper-append-to-body="false"
                  v-model="form.type"
                >
                  <el-option
                    v-for="item in optionAll.typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="分类方式："
                prop="method"
              >
                <el-select
                  :popper-append-to-body="false"
                  v-model="form.method"
                >
                  <el-option
                    v-for="item in optionAll.methodOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <Chart1
              class="right-content-echart"
              :data="statisticsData"
            />
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="项目信息" name="properties">
          <div class="detail">
            <Detail :detail-data="detailData" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="图例" name="legend">
          <el-scrollbar>
            <el-collapse class="legend-collapse">
              <el-collapse-item
                v-for="item in loadedLayers"
                :title="item.label"
                :name="item.label"
                :key="item.value"
              >
                <div
                  class="legend-list"
                  v-if="legendData[item.value]"
                >
                  <div
                    v-for="legendItem in legendData[
                      item.value
                    ]"
                    :key="legendItem.name"
                    class="legend-list-item"
                  >
                    <el-image
                      :src="legendItem.img"
                      fit="none"
                    />
                    <span>{{ legendItem.name }}</span>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
      <div
        class="right-close"
        @click="rightHide = !rightHide"
      ></div>
      <div
        class="bar"
        @mousedown.prevent="handleRightMouseDown"
      ></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Search from '@/components/search'
import { getAction } from '@/utils/helper'
// import More from './components/more'
import Chart1 from './components/chart1'
import Detail from './components/detail'
import {
  getProjectList,
  getProjectProperty,
  getProjectStatistics
} from '@/api/project'
import Icon from '@/components/icon'

let _layerManager
const mapViewer = {}
const geojsonList = new Map()
const labelEntities = new Map()
const labelLayer = new Cesium.CustomDataSource('labelLayer')

export default {
  name: 'project',
  components: {
    Search,
    Chart1,
    // More,
    Detail,
    Icon
  },
  inject: ['viewerId'],
  data() {
    return {
      leftX: '',
      leftWidth: '',
      rightX: '',
      rightWidth: '',
      keyword: '',
      pageSize: 100,
      pageIndex: 1,
      // 项目类型
      projectType: '',
      // 项目周期
      projectCycle: '',
      // 项目状态
      projectStatus: '',
      // 所在区域
      projectArea: '',
      projectTypeOptions: [],
      projectCycleOptions: [],
      projectStatusOptions: [],
      projectAreaOptions: [],
      time: '',
      area: '',
      projectListData: [],
      shownProjectListData: [],
      showMore: true,
      leftHide: false,
      rightHide: true,
      rightTabActiveName: 'statistics',
      rightFilterPanelVisible: false,
      // 统计数据
      form: {
        cycle: '',
        area: '',
        status: '',
        type: '',
        method: 'projectType'
      },
      optionAll: {
        cycleOptions: [{ label: '全部', value: '' }],
        areaOptions: [{ label: '全部', value: '' }],
        statusOptions: [{ label: '全部', value: '' }],
        typeOptions: [{ label: '全部', value: '' }],
        methodOptions: [
          { label: '周期', value: 'projectCycle' },
          // { label: '区域', value: 'projectArea' },
          { label: '状态', value: 'projectStatus' },
          { label: '类型', value: 'projectType' }
        ]
      },
      // 统计数据
      statisticsData: [],
      previousEntities: null,
      previousColor: null,
      detailData: null,
      checkboxState: true,
      isIndeterminate: false,
      loadedLayers: [],
      selectedLayer: '',
      legendData: {}
    }
  },
  async created() {
    this.getProjectPropertyData('projectType')
    this.getProjectPropertyData('projectCycle')
    this.getProjectPropertyData('projectStatus')
    this.getProjectDataList(false)
    this.getProjectStatisticsData()

    this.$bus.$on('togglePanel', (flag) => {
      this.leftHide = flag
    })

    const { viewer, layerManager } = await getAction(
      this.viewerId
    )
    mapViewer[this.viewerId] = viewer
    mapViewer[this.viewerId].dataSources.add(labelLayer)
    _layerManager = layerManager

    mapViewer[
      this.viewerId
    ].screenSpaceEventHandler.setInputAction(
      this.leftClick,
      Cesium.ScreenSpaceEventType.LEFT_CLICK
    )

    this.$bus.$on('removeAdd', () => {
      this.getLayers(true)
    })
    this.$bus.$on('removeLayer', () => {
      this.getLayers(true)
    })
    this.getLayers()

    if (labelLayer) {
      labelLayer.entities.show = false
    }

    this.$bus.$on('showProjectLabel', (visible) => {
      console.log('show project label', visible)
      if (labelLayer) {
        labelLayer.entities.show = visible
      }
    })
  },
  beforeDestroy() {
    mapViewer[
      this.viewerId
    ].screenSpaceEventHandler.removeInputAction(
      Cesium.ScreenSpaceEventType.LEFT_CLICK
    )
    this.removeAllGeojson()
    mapViewer[this.viewerId].dataSources.remove(
      labelLayer,
      true
    )
  },
  methods: {
    /**
     * 获取项目数据
     *
     * @param isLoadMore 是否是刷新
     */
    getProjectDataList(isLoadMore) {
      if (isLoadMore) {
        this.pageIndex += 1
      } else {
        this.pageIndex = 1
      }
      getProjectList(
        this.pageSize,
        this.pageIndex,
        this.projectType,
        this.projectCycle,
        this.projectStatus
      )
        .then((res) => {
          if (res.success) {
            const data = res.data.list.map((item) => {
              item.checked = true
              return item
            })
            if (isLoadMore) {
              this.projectListData.push(...data)
            } else {
              this.projectListData = data
            }
            if (this.keyword) {
              this.shownProjectListData =
                this.projectListData.filter((item) => {
                  return (
                    item.name &&
                    item.name.indexOf(this.keyword) !== -1
                  )
                })
            } else {
              this.shownProjectListData =
                this.projectListData
            }
          } else {
            if (isLoadMore) {
              this.pageIndex -= 1
            }
          }
        })
        .catch(() => {
          if (isLoadMore) {
            this.pageIndex -= 1
          }
        })
    },

    /**
     * 获取查询属性
     *
     * @param type 属性类型
     */
    getProjectPropertyData(type) {
      getProjectProperty(type).then((res) => {
        if (res.success) {
          const options = res.data.filter((item) => !!item)
          switch (type) {
            case 'projectType':
              this.projectTypeOptions = options.map(
                (item) => {
                  return {
                    label: item,
                    value: item
                  }
                }
              )
              this.optionAll.typeOptions.push(
                ...this.projectTypeOptions
              )
              break
            case 'projectCycle':
              this.projectCycleOptions = options.map(
                (item) => {
                  return {
                    label: item,
                    value: item
                  }
                }
              )
              this.optionAll.cycleOptions.push(
                ...this.projectCycleOptions
              )
              break
            case 'projectStatus':
              this.projectStatusOptions = options.map(
                (item) => {
                  return {
                    label: item,
                    value: item
                  }
                }
              )
              this.optionAll.statusOptions.push(
                ...this.projectStatusOptions
              )
              break
            default:
              break
          }
        }
      })
    },

    getProjectStatisticsData() {
      getProjectStatistics(
        this.form.method,
        this.form.method === 'projectStatus'
          ? this.form.status
          : '',
        this.form.method === 'projectCycle'
          ? this.form.cycle
          : '',
        this.form.method === 'projectType'
          ? this.form.type
          : ''
      )
        .then((res) => {
          this.statisticsData = []
          if (res.data) {
            this.statisticsData = res.data.filter(
              (item) => !!item.type
            )
          }
        })
        .catch((error) => {
          console.error(error)
          this.statisticsData = []
        })
    },

    confirmFilter() {
      this.getProjectDataList(false)
    },

    handleChange(checked, data) {
      if (checked) {
        this.showGeojson(data)
      } else {
        this.hideGeojson(data)
      }
      if (
        this.shownProjectListData.every(
          (item) => item.checked === true
        )
      ) {
        this.isIndeterminate = false
        this.checkboxState = true
      } else if (
        this.shownProjectListData.every(
          (item) => item.checked === false
        )
      ) {
        this.isIndeterminate = false
        this.checkboxState = false
      } else {
        this.isIndeterminate = true
      }
    },

    handleCheckAllChange(val) {
      this.shownProjectListData.forEach((item) => {
        item.checked = val
      })
      this.isIndeterminate = false

      this.removeAllGeojson()
      this.shownProjectListData.forEach((item) => {
        if (item.geojson) {
          try {
            const geojsonObject = JSON.parse(item.geojson)
            const promise = Cesium.GeoJsonDataSource.load(
              geojsonObject,
              {
                clampToGround: true
              }
            )
            mapViewer[this.viewerId].dataSources.add(
              promise
            )
            promise.then((dataSource) => {
              geojsonList.set(item.pkid, dataSource)
              dataSource.show = item.checked

              const entity = dataSource.entities.values[0]
              let labelEntity
              if (entity.position) {
                labelEntity = new Cesium.Entity()
                labelEntity.position = entity.position
              } else if (
                entity.polyline.positions.getValue()[0]
              ) {
                labelEntity = new Cesium.Entity()
                labelEntity.position =
                  entity.polyline.positions.getValue()[0]
              } else if (
                entity.polygon.hierarchy.getValue()
                  .positions[0]
              ) {
                labelEntity = new Cesium.Entity()
                labelEntity.position =
                  entity.polygon.hierarchy.getValue().positions[0]
              }
              if (labelEntity) {
                labelEntity.label = {
                  text: item.name || '',
                  show: item.checked,
                  showBackground: true,
                  font: '16px',
                  horizontalOrigin:
                    Cesium.HorizontalOrigin.CENTER,
                  verticalOrigin:
                    Cesium.VerticalOrigin.BOTTOM,
                  pixelOffset: new Cesium.Cartesian2(0, 10),
                  heightReference:
                    Cesium.HeightReference
                      .RELATIVE_TO_GROUND
                }
                labelLayer.entities.add(labelEntity)
                labelEntities.set(item.pkid, labelEntity)
              }
            })
          } catch (err) {
            console.error('加载geojson失败', err)
          }
        }
      })
    },

    removeAllGeojson() {
      geojsonList.forEach((item) => {
        mapViewer[this.viewerId].dataSources.remove(item)
      })
      labelEntities.forEach((item) => {
        labelLayer.entities.remove(item)
      })
    },

    showGeojson(data) {
      if (geojsonList.get(data.pkid)) {
        geojsonList.get(data.pkid).show = true
        labelEntities.get(data.pkid).show = true
        mapViewer[this.viewerId].flyTo(
          geojsonList.get(data.pkid)
        )
        this.handleProjectItemClick(data)
      }
    },

    hideGeojson(data) {
      if (geojsonList.get(data.pkid)) {
        geojsonList.get(data.pkid).show = false
        labelEntities.get(data.pkid).show = false
      }
    },

    handleProjectItemClick(data) {
      if (geojsonList.get(data.pkid)) {
        const geojson = geojsonList.get(data.pkid)
        mapViewer[this.viewerId].flyTo(geojson)
        // 恢复之前的颜色
        if (this.previousEntities && this.previousColor) {
          this.previousEntities.forEach((item) => {
            item.polyline.material.color =
              this.previousColor
          })
        }
        this.previousEntities = geojson.entities.values
        this.previousColor =
          geojson.entities.values[0].polyline.material.color
        this.previousEntities.forEach((item) => {
          item.polyline.material.color =
            Cesium.Color.fromCssColorString('#00ff00')
        })
      }
      this.rightTabActiveName = 'properties'
      this.rightHide = false
      this.detailData = data
    },

    closeDetail() {
      this.rightTabActiveName = 'statistics'
      this.detailData = null
    },

    handleLeftMouseDown(e) {
      this.leftX = e.clientX
      this.leftWidth = this.$refs.leftRef.offsetWidth
      document.documentElement.addEventListener(
        'mousemove',
        this.leftMove
      )
      document.documentElement.addEventListener(
        'mouseup',
        this.leftEnd
      )
    },
    leftMove(e) {
      let width = this.leftWidth + e.clientX - this.leftX
      width = width >= 500 ? 500 : width < 282 ? 282 : width
      this.$refs.leftRef.style['min-width'] = `${width}px`
      this.$refs.leftRef.style.setProperty(
        '--scroll-width',
        `${-(width - 47 - 1)}px`
      )
    },
    leftEnd(e) {
      document.documentElement.removeEventListener(
        'mousemove',
        this.leftMove
      )
      document.documentElement.removeEventListener(
        'mouseup',
        this.leftEnd
      )
    },
    handleRightMouseDown(e) {
      this.rightX = e.clientX
      this.rightWidth = this.$refs.rightRef.offsetWidth
      document.documentElement.addEventListener(
        'mousemove',
        this.rightMove
      )
      document.documentElement.addEventListener(
        'mouseup',
        this.rightEnd
      )
    },
    rightMove(e) {
      let width =
        this.rightWidth + (this.rightX - e.clientX)
      width = width >= 500 ? 500 : width < 400 ? 400 : width
      this.$refs.rightRef.style['min-width'] = `${width}px`
      this.$refs.rightRef.style.setProperty(
        '--scroll-width',
        `${-(width - 47 - 1)}px`
      )
    },
    rightEnd(e) {
      document.documentElement.removeEventListener(
        'mousemove',
        this.rightMove
      )
      document.documentElement.removeEventListener(
        'mouseup',
        this.rightEnd
      )
    },
    handleRightTabClick(tab) {
      if (tab.label === '图例') {
        console.log('显示图例数据')
      }
    },
    leftClick(movement) {
      const pickedFeature = mapViewer[
        this.viewerId
      ].scene.pick(movement.position)
      if (Cesium.defined(pickedFeature)) {
        // 点击的EntityCollection
        const clickedEntityCollection =
          pickedFeature.id.entityCollection.values
        let clickedId
        geojsonList.forEach((value, key) => {
          if (
            value.entities.values ===
            clickedEntityCollection
          ) {
            clickedId = key
          }
        })
        if (clickedId) {
          const find = this.shownProjectListData.find(
            (item) => item.pkid === clickedId
          )
          if (find) {
            this.handleProjectItemClick(find)
          }
        }
      }
    },
    getLayers(chooseFirst) {
      const layerList = _layerManager.layers
        .reverse()
        .filter((item) => item.type !== 'layer')
      // console.log('图层', layerList)
      this.loadedLayers.splice(0, this.loadedLayers.length)
      this.loadedLayers.push(
        ...layerList.map((item) => {
          return {
            label: item.title,
            value: item.id,
            data: item
          }
        })
      )
      if (chooseFirst) {
        if (this.loadedLayers.length > 0) {
          this.selectedLayer =
            this.loadedLayers[0] &&
            this.loadedLayers[0].value
        } else {
          this.selectedLayer = ''
        }
      } else {
        if (
          this.loadedLayers.every(
            (item) => item.value !== this.selectedLayer
          )
        ) {
          // 已选择的图层被移除
          this.selectedLayer =
            this.loadedLayers[0] &&
            this.loadedLayers[0].value
        }
      }

      this.loadedLayers.forEach((item) => {
        if (
          !this.legendData[item.data.id] ||
          this.legendData[item.data.id].length === 0
        ) {
          this.getLayerLegendData(item.data)
        }
      })
    },
    getLayerLegendData(layer) {
      console.log('layer', layer)
      this.legendData[layer.id] = []
      axios
        .get(layer.serviceUrl + '/layers.json')
        .then((res) => {
          if (res.data) {
            const subLayerNames = []
            const subLayers = []
            res.data[0].subLayers.layers.forEach(
              (subLayer) => {
                if (
                  subLayer.theme &&
                  subLayer.theme.items &&
                  subLayer.theme.items instanceof Array &&
                  subLayer.theme.items.length
                ) {
                  subLayerNames.push(
                    subLayer.name + '@@' + res.data[0].name
                  )
                  subLayers.push(subLayer)
                }
              }
            )
            console.log('subLayerNames', subLayerNames)
            subLayers.forEach((subLayer, subLayerIndex) => {
              subLayer.theme.items.forEach(
                (item, index) => {
                  this.legendData[layer.id].push({
                    name: item.caption,
                    img:
                      layer.serviceUrl +
                      '/layers/' +
                      subLayerNames[subLayerIndex] +
                      `/items/${index}/legend.png?width=30&height=30`
                  })
                }
              )
            })
          }
        })
        .catch((err) => {
          console.error('查询子图层失败', err)
        })
    }
  },
  watch: {
    leftHide(val) {
      if (val) {
        this.showMore = false
      } else {
        this.$bus.$emit('hideSearchPanel')
      }
    },
    keyword(val) {
      if (val) {
        this.shownProjectListData =
          this.projectListData.filter((item) => {
            return (
              item.name && item.name.indexOf(val) !== -1
            )
          })
      } else {
        this.shownProjectListData = this.projectListData
      }
    },
    form: {
      handler() {
        this.getProjectStatisticsData()
      },
      deep: true
    },
    shownProjectListData(val) {
      if (val) {
        if (val.length === 0) {
          this.isIndeterminate = false
          this.checkboxState = false
        } else {
          if (val.every((item) => item.checked === true)) {
            this.isIndeterminate = false
            this.checkboxState = true
          } else if (
            val.every((item) => item.checked === false)
          ) {
            this.isIndeterminate = false
            this.checkboxState = false
          } else {
            this.isIndeterminate = true
          }
        }
        this.removeAllGeojson()
        setTimeout(() => {
          val.forEach((item) => {
            if (item.geojson) {
              try {
                const geojsonObject = JSON.parse(
                  item.geojson
                )
                const promise =
                  Cesium.GeoJsonDataSource.load(
                    geojsonObject,
                    {
                      clampToGround: true
                    }
                  )
                mapViewer[this.viewerId].dataSources.add(
                  promise
                )
                promise.then((dataSource) => {
                  geojsonList.set(item.pkid, dataSource)
                  dataSource.show = item.checked

                  const entity =
                    dataSource.entities.values[0]
                  let labelEntity
                  if (entity.position) {
                    labelEntity = new Cesium.Entity()
                    labelEntity.position = entity.position
                  } else if (
                    entity.polyline.positions.getValue()[0]
                  ) {
                    labelEntity = new Cesium.Entity()
                    labelEntity.position =
                      entity.polyline.positions.getValue()[0]
                  } else if (
                    entity.polygon.hierarchy.getValue()
                      .positions[0]
                  ) {
                    labelEntity = new Cesium.Entity()
                    labelEntity.position =
                      entity.polygon.hierarchy.getValue().positions[0]
                  }
                  if (labelEntity) {
                    labelEntity.label = {
                      text: item.name || '',
                      show: true,
                      showBackground: true,
                      font: '16px',
                      horizontalOrigin:
                        Cesium.HorizontalOrigin.LEFT,
                      verticalOrigin:
                        Cesium.VerticalOrigin.BOTTOM,
                      pixelOffset: new Cesium.Cartesian2(
                        -20,
                        -40
                      ),
                      heightReference:
                        Cesium.HeightReference
                          .RELATIVE_TO_GROUND
                    }
                    labelLayer.entities.add(labelEntity)
                    labelEntities.set(
                      item.pkid,
                      labelEntity
                    )
                  }
                })
              } catch (err) {
                console.error('加载geojson失败', err)
              }
            }
          })
          const geojsonArray = [...geojsonList.values()]
          // console.log('geojsonArray', geojsonArray)
          mapViewer[this.viewerId].flyTo(geojsonArray[0])
        }, 200)
      } else {
        this.removeAllGeojson()
        this.isIndeterminate = false
        this.checkboxState = false
      }
    },
    // selectedLayer: {
    //   handler(val, oldVal) {
    //     if (val) {
    //       const find = this.loadedLayers.find(
    //         (item) => item.value === this.selectedLayer
    //       )
    //       if (find) {
    //         this.getLayerLegendData(find.data)
    //       }
    //     } else {
    //       console.log('clear legend')
    //       if (oldVal) {
    //         this.legendData[oldVal] = []
    //       }
    //     }
    //   }
    // },
    projectCycle(val) {
      this.confirmFilter()
    },
    projectArea(val) {
      this.confirmFilter()
    },
    projectStatus(val) {
      this.confirmFilter()
    },
    projectType(val) {
      this.confirmFilter()
    }
  }
}
</script>

<style lang="scss" scoped>
.left {
  position: fixed;
  left: 48px;
  top: 60px;
  width: 282px;
  height: calc(100% - 60px);
  padding: 10px 0;
  background: linear-gradient(
    90deg,
    rgba(25, 47, 61, 0.85),
    rgba(25, 47, 61, 0.1)
  );
  transition: all 1s;
  --scroll-width: -234px;

  .left-content-tree-item-r {
    transition: all 1s;
  }

  &-content {
    width: 100%;
    height: 100%;
    //position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    &-search {
      height: 30px;
      width: 100%;
      padding: 0 8px;
      display: flex;
      align-items: center;

      .search {
        margin: 0 10px;
      }
    }

    &-query {
      display: flex;
      align-items: center;
      padding: 10px;

      &-item {
        flex: 1;

        ::v-deep {
          .el-input__icon,
          .el-range-separator {
            height: 30px;
            line-height: 30px;
            color: #fff;
            padding: 0;
          }

          .el-input__inner,
          .el-range-input {
            background-color: transparent;
            border: none;
            color: #fff;
            height: 30px !important;
            border-radius: 0;
          }

          .el-tag.el-tag--info {
            background-color: rgba(201, 201, 201, 0.2);
            border-color: rgba(255, 255, 255, 0.4);
            color: #fff;
          }

          .el-tag--small {
            height: 20px;
            line-height: 20px;
          }
        }

        & > span {
          margin-bottom: 4px;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
        }

        & > .time {
          width: 100%;
          height: 30px;
          background: rgba(201, 201, 201, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.4);
        }

        & > .area {
          width: 100%;
          height: 30px;
        }
      }

      &-btn {
        display: flex;
        justify-content: space-around;
        align-items: center;

        & > div {
          width: 70px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          cursor: pointer;
        }

        .submit {
          background: rgba(0, 210, 255, 0.5);
        }

        .cancel {
          background: rgba(255, 255, 255, 0.5);
        }
      }
    }

    &-legend {
      position: absolute;
      bottom: 10px;
      left: 100%;
      width: 128px;
      background: #192f3de6;
      padding: 10px;
      display: flex;
      flex-direction: column;

      &-item {
        display: flex;
        align-items: center;

        .el-image {
          width: 14px;
          height: 14px;
          margin-right: 6px;
        }

        span {
          font-size: 12px;
          color: #d2e6f0;
        }
      }

      &-item:not(:last-of-type) {
        margin-bottom: 15px;
      }
    }

    &-tag {
      &-t {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;

        &::before,
        &::after {
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          top: 0;
        }

        &::before {
          left: 0;
          border-top: 4px solid #fff;
          border-right: 4px solid transparent;
        }

        &::after {
          right: 0;
          border-top: 4px solid #fff;
          border-left: 4px solid transparent;
        }
      }

      &-b {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;

        &::before,
        &::after {
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          bottom: 0;
        }

        &::before {
          left: 0;
          border-bottom: 4px solid #fff;
          border-right: 4px solid transparent;
        }

        &::after {
          right: 0;
          border-bottom: 4px solid #fff;
          border-left: 4px solid transparent;
        }
      }
    }

    &-title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding-left: 14px;
      font-size: 18px;
      font-weight: 800;
      color: #00d2ff;
      word-break: keep-all;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    &-tree {
      ::v-deep {
        // scrollbar横向滚动条
        .el-scrollbar__wrap {
          overflow-x: hidden;

          .project-list {
            &-item {
              background-color: rgba(25, 47, 61, 0.5);
              border: 1px solid rgba(0, 0, 0, 0.2);
              margin-bottom: 4px;
              padding: 10px;
              cursor: pointer;

              //&:hover {
              //  background-color:rgba(255,255,255,0);
              //}

              &-top {
                display: flex;
                align-items: center;

                .el-checkbox__input {
                  margin-right: 10px;

                  .el-checkbox__inner {
                    width: 12px;
                    height: 12px;
                    background: rgba(255, 255, 255, 0.3);
                    border: 1px solid #ffffff;
                  }
                }

                &__title {
                  width: calc(100% - 12px - 10px);
                  display: flex;
                  align-items: center;

                  .name {
                    font-size: 14px;
                    font-weight: 800;
                    flex: 1;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: inline-block;
                    white-space: nowrap;
                    margin-right: 10px;
                  }

                  .status {
                    float: right;
                    position: relative;
                    text-align: center;
                    line-height: 20px;
                    width: 40px;
                    height: 20px;
                    font-size: 14px;

                    &::before {
                      content: '';
                      width: 7px;
                      height: 7px;
                      background: rgba(0, 0, 0, 0.5);
                      position: absolute;
                      left: 0;
                      top: 0;
                      clip-path: polygon(
                        80% -1px,
                        100% 0,
                        0 100%,
                        -1px 80%
                      );
                    }

                    &::after {
                      content: '';
                      width: 7px;
                      height: 7px;
                      background: rgba(0, 0, 0, 0.5);
                      position: absolute;
                      right: 0;
                      bottom: 0;
                      clip-path: polygon(
                        100% 0,
                        100% 40%,
                        40% 100%,
                        0 100%
                      );
                    }
                  }

                  .zj {
                    background: linear-gradient(
                      270deg,
                      #cfaf00,
                      #beb683
                    );
                  }

                  .jc {
                    background: linear-gradient(
                      270deg,
                      #00b79f,
                      #8ab700
                    );
                  }

                  .dj {
                    background: linear-gradient(
                      150deg,
                      #e3a482,
                      #c45833
                    );
                  }
                }
              }

              &-bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 9px;

                span {
                  font-size: 12px;
                  font-weight: 500;
                  color: #d2e6f0;
                }
              }
            }
          }
        }
      }

      width: calc(100% - 16px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      height: calc(100% - 50px - 50px);

      &-item:not(:last-child) {
        margin-bottom: 4px;
      }

      &-item {
        background: rgba(0, 0, 0, 0.2);
        padding: 10px 8px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        &-l {
          flex: 1;
          margin-right: 10px;
          display: flex;
          flex-direction: column;

          & > span:nth-child(1) {
            word-break: break-all;
            font-size: 14px;
            font-weight: 800;
            color: #ffffff;
          }

          & > span:nth-child(2) {
            font-size: 12px;
            font-weight: 500;
            color: #d2e6f0;
          }
        }

        &-r {
          width: 40px;
          height: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          line-height: 20px;
          background: linear-gradient(
            270deg,
            #505fba,
            #949bc5
          );
          position: relative;

          &::before {
            content: '';
            width: 7px;
            height: 7px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0px;
            top: 0px;
            clip-path: polygon(
              80% 0,
              100% 0,
              0 100%,
              0 80%
            );
          }
        }
      }
    }
  }

  &-hide {
    left: var(--scroll-width);

    .left-content-tree-item-r {
      width: 0px;
      font-size: 0;
    }

    & > .left-close {
      background-color: red;

      &::before,
      &::after {
        transform-origin: 6px 1px;
      }
    }
  }

  &-close {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 44px;
    cursor: pointer;
    background: #192f3d;
    opacity: 0.7;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 7px;
      height: 2px;
      background: #fff;
      top: 50%;
      left: 50%;
      transform-origin: 1px 1px;
    }

    &::before {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(-45deg);
    }

    &::after {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(45deg);
    }
  }

  .bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    cursor: col-resize;
  }
}

.right {
  position: fixed;
  right: 48px;
  top: 60px;
  width: 400px;
  height: calc(100% - 60px);
  background: linear-gradient(
    90deg,
    rgba(25, 47, 61, 0.1),
    rgba(25, 47, 61, 0.85)
  );
  transition: all 1s;
  --scroll-width: -352px;

  .el-tabs {
    height: 100%;
    margin: 0 16px;
    display: flex;
    flex-direction: column;

    ::v-deep {
      .el-tabs__header {
        margin: 0;
      }

      .el-tabs__item {
        color: white;
      }

      .el-tabs__item.is-active {
        color: #00d2ff;
      }

      .el-tabs__item:hover {
        color: #00d2ff;
      }

      .el-tabs__content {
        flex: 1;

        .el-tab-pane {
          height: 100%;
        }
      }

      .detail {
        width: 100%;
        height: 100%;

        &-header {
          width: 100%;
          height: 43px;
          padding: 16px 6px 16px 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          &-title {
            font-size: 16px;
            font-weight: 800;
          }

          &-close {
            padding: 10px;
            font-size: 18px;
            cursor: pointer;
          }
        }

        ::v-deep {
          .el-scrollbar__wrap {
            overflow-x: hidden;
          }
        }
      }
    }
  }

  ::v-deep {
    // scrollbar横向滚动条
    .el-scrollbar__wrap {
      overflow-x: hidden;

      .el-form {
        background-image: url('../../../../public/img/basemaps/yxjz.png');
        padding-left: 10px;
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: 1px !important;
        padding-top: 8px;
      }

      .el-form-item {
        margin-bottom: 0;

        &:last-child {
          margin-bottom: 7px;
        }
      }

      .el-form-item__label {
        padding: 0 !important;
        color: white !important;
        line-height: 20px !important;
      }

      .el-input__inner {
        background: rgba(65, 89, 117, 0.5) !important;
        border-color: #4a627f !important;
        height: 30px !important;
        color: #a7beca !important;
      }
    }

    .legend-collapse {
      background-color: transparent;
      border-top: none;
      border-bottom: none;

      .el-collapse-item {
        background-color: transparent;

        .el-collapse-item__header {
          background-color: transparent;
          color: white;
          border-bottom: none;
        }

        .el-collapse-item__wrap {
          background-color: transparent;
          border-bottom: none;

          .el-collapse-item__content {
            padding-bottom: 0;
          }
        }
      }
    }
  }

  .legend-list {
    display: flex;
    flex-direction: column;

    &-item {
      display: flex;
      align-items: center;

      &:not(:last-of-type) {
        margin-bottom: 15px;
      }

      .el-image {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }

      span {
        font-size: 14px;
        color: #d2e6f0;
      }
    }
  }

  &-content {
    width: calc(100% - 32px);
    height: 100%;
    margin: 20px auto;

    &-title:not(:first-child) {
      padding-top: 26px;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    &-title {
      //padding-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-l {
        width: 4px;
        height: 12px;
        background: linear-gradient(0deg, #bcf8ff, #40ebff);
        border-radius: 0;
        margin-right: 10px;
      }

      &-r {
        flex: 1;
        word-break: keep-all;
        font-size: 14px;
        //font-weight: 800;
        background: white;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &-echart {
      width: 100%;
      padding: 10px 0;
    }

    &-query {
      display: flex;
      align-items: center;
      justify-content: space-between;

      & span {
        word-break: keep-all;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
      }

      &-draw {
        display: flex;
        align-items: center;

        & span {
          cursor: pointer;
          margin-left: 4px;
        }
      }

      ::v-deep {
        .el-input__inner {
          width: 80px;
          background-color: transparent;
          border: 1px solid rgba(255, 255, 255, 0.4);
          border-radius: 0;
          height: 30px;
          line-height: 30px;
          color: #fff;
        }

        .el-input__icon {
          line-height: 30px;
        }
      }
    }

    ::v-deep {
      .el-form {
        padding: 10px;

        &-item {
          margin-bottom: 10px;

          &__label {
            color: white;
            padding: 0;
            line-height: 16px;
          }

          &__content {
            .el-input {
              &__inner {
                color: white;
                background: rgba(255, 255, 255, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.2);
              }
            }

            .el-select {
              width: 100%;
            }
          }
        }
      }
    }
  }

  &-hide {
    right: var(--scroll-width);

    & > .right-close {
      background-color: red;

      &::before,
      &::after {
        transform-origin: 1px 1px;
      }
    }
  }

  &-close {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 44px;
    cursor: pointer;
    background: #192f3d;
    opacity: 0.7;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 7px;
      height: 2px;
      background: #fff;
      top: 50%;
      left: 50%;
      transform-origin: 6px 1px;
    }

    &::before {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(-45deg);
    }

    &::after {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(45deg);
    }
  }

  .bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    cursor: col-resize;
  }
}

::v-deep {
  .el-select-dropdown {
    border-color: #4a80a3;

    .el-select-dropdown__empty {
      background-color: #4a80a3;
      color: white;
    }

    .el-select-dropdown__list {
      background-color: #4a80a3;

      .el-select-dropdown__item {
        color: white;
        background-color: #4a80a3;

        &.selected {
          color: white;
        }

        &.hover {
          background-color: #28516c;
        }
      }
    }

    .popper__arrow {
      border-bottom-color: #4a80a3;

      &::after {
        border-bottom-color: #4a80a3;
      }
    }
  }
}
</style>
